import React, { useEffect, useState } from "react";
import { Form, Col, Input, Row, Button, Select,Divider,Modal,Table,Space,Pagination } from "antd";
import { LeftOutlined,AlignLeftOutlined} from "@ant-design/icons";
import axios from "axios";

import "./index.css";
/**
 * 处理data
 * @param {} props 
 * @returns 
 */
function manageData(exisData,newData){
  const ids=[];
  if(Array.isArray(exisData)){
        ids=exisData.map((item)=>{
      return item.id;
    })

  }

  const nowData=newData.filter((item)=>{
   if(!ids.includes(item.id)){
      return item;
   }
  })
  return nowData;
}


/**
 * 模态框
 */
function CuiModel(props){
      /**选择每页多少条纪律的状态值 默认每页显示10条纪律*/
      const[pageNum,setPageNum]=useState(3);
      /**选择第几页的状态值 默认显示第一页*/
      const[pageIndex,setPageIndex]=useState(1);
      const[data,setData]=useState([]);
      console.log("父传子",props);
      


/**
 * 拉去菜品信息列表
 * @returns 
 */
 function queryCui(condition){
    axios({
      headers: {
        'tenantId':500,
        "userId":11111
    },
      method: 'post',
      url:'http://localhost:9101/product/search',
      data: {
         condition,
         "pageIndex":pageIndex,
         "pageSize":pageNum,
        // "sortFields":[{"field":"business_no","asc":true}],
        
      }
  
    }).then((data)=>{
      /**
       * 查询出来过滤已选择菜品
       */
     setData(data.data);
    })
  
  }

    const [isModalVisible, setIsModalVisible] = useState(false);
    useEffect(()=>{
        setIsModalVisible(props.data.shopModelStatus);
        if(props.data.shopModelStatus)
        {
            queryCui();
        }
      

    },[props.data.shopModelStatus]);
    useEffect(()=>{
      queryCui();
    },[pageIndex,pageNum])
   

   


    const handleOk = () => {
    
        props.dispatch({ type: 'changeShopModel', status: false });
    };

    const handleCancel = () => {
      props.dispatch({ type: 'changeShopModel', status: false });
    };

    const columns = [
        {
          title: "菜品名",
          dataIndex: "name",
        },
        {
          title: "菜品单价",
          dataIndex:  "unitPrice",
        },
        {
          title: "计量单位",
          dataIndex: "unitOfMeasure",
        },
    ];
    
    return (
        <>
          <Modal title="Cui Modal"  visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} width={800}
          footer={
            [] // 设置footer为空，去掉 取消 确定默认按钮
            }
          >
          <Table pagination={false} dataSource={data.records} columns={columns} rowKey="id" 
          onRow={record => {
            record.count=1
            return {
              onClick: ()=>{
                console.log("菜品选择框中的数据",record);
                props.dispatch({ type: 'changeTableValues', tableValues: record });
                props.dispatch({ type: 'changeShopModel', status: false });
              
              }
           
            };
          }}
          />
          <Row>
         <Col span={8}> </Col>
          <Col span={8}>
          <Space>
          <span>&lt;&lt;</span>
          <Pagination size="small" total={data.totalCount} pageSize={pageNum} onChange={(num)=>{
            setPageIndex(num);
          }} />
          <span>&gt;&gt;</span>
          </Space>
         </Col>
        <Col span={8}>
          <span>每页</span>
          <input style={{width:35}} defaultValue={pageNum} onChange={(e)=>{setPageNum(e.target.value)}}/>
          <span>条记录</span>
        </Col>
      </Row>
          </Modal>
        </>
      );
}
export default CuiModel;